import { defineStore } from "pinia";
import { computed, reactive } from "vue";
import type { IList, TItem } from "./type";
import useCounterStore from "../counter";

const useTodoListStore = defineStore(
  "todoList",
  () => {
    const list = reactive<IList>({
      items: [
        {
          text: "学习 Pinia",
          isCompleted: true,
        },
        {
          text: "打羽毛球",
          isCompleted: false,
        },
        {
          text: "玩游戏",
          isCompleted: true,
        },
      ],
      counter: 100,
    });

    const counterStore = useCounterStore(); // store创建不能放在函数外
    const doubleCounter = computed(() => list.counter * 2);
    const otherCounter = computed(() => counterStore.doublueCount * 3);

    const addItem = (newItem: TItem) => {
      list.items.unshift(newItem);
    };

    const changeCompleteStatus = (i: number) => {
      list.items[i].isCompleted = !list.items[i].isCompleted;
    };

    const deleteItem = (i: number) => {
      list.items.splice(i, 1);
    };

    return {
      doubleCounter,
      otherCounter,
      list,
      addItem,
      changeCompleteStatus,
      deleteItem,
    };
  },
  {
    persist: true,
  }
);

export default useTodoListStore;
